<template>
  <div style="height: 100%; display: flex; flex-direction: column;">
    <BreadFadeWidget ref="refBread" :start-index="2" style="padding: 8px 4px 0 8px"
                     :root-path="config.rootItem" :detail-label="config.detail" :trigger-path="triggerPath"/>
    <TableHeaderWidget :header="current().name"/>
    <PermitList ref="refList" v-show="config.isRoot" :product="true"
                :entry="{server: SERVERS.ASSET, name: currentNames.PERMIT}"/>
    <PermitDetail v-show="!config.isRoot" ref="refDetail"/>
  </div>
</template>

<script setup lang="ts" name="permitMng">

import TableHeaderWidget from "@/widget/TableHeaderWidget.vue";
import PermitList from "@/views/sop/list/PermitList.vue";
import BreadFadeWidget from "@/widget/BreadFadeWidget.vue";
import PermitDetail from "@/views/pages/SystemMng/PermitDetail.vue";
import {useListPage} from "@/utils/sop/UseListPage";
import {currentNames, SERVERS} from "@/stores/conf";

const config = {
  isRoot: true,
  detail: '权限详情',
  rootItem: {id: '',name: '权限列表',}
}

const {refBread, refList, refDetail, current, triggerPath} = useListPage(currentNames.PERMIT, config);

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}
</style>
